<template>
  <view class="login-page">
    <view class="top">
      <view class="header">
        <view>
          <tui-icon
            name="shut"
            size="24"
            unit="px"
            color="#333"
            class="close"
            @click="close"
            v-if="canBack == 'true'"
          />
        </view>
        <view class="language" @click="openLanguage">
          <view class="iconfont icon-global" />
          <view class="txt">{{ $t("languange") }}</view>
          <tui-icon
            name="turningdown"
            size="18"
            unit="px"
            color="#666"
            class="arrow"
          ></tui-icon>
        </view>
      </view>
      <view class="main">
        <view class="title">{{
          mode == "username" ? $t("usernameLogin") : $t("smsLogin")
        }}</view>
        <tui-input
          v-model="form.username"
          v-if="mode == 'username'"
          :placeholder="$t('usernamePlaceholder')"
          clearable
          :adjustPosition="false"
          :lineLeft="false"
          padding="13px 0 13px 0"
          class="username"
        />
        <tui-input
          v-model="form.mobile"
          v-else
          type="number"
          :placeholder="$t('passwordPlaceholder')"
          :maxlength="11"
          clearable
          :adjustPosition="false"
          :lineLeft="false"
          padding="13px 0 13px 0"
          class="username"
        />
        <tui-input
          v-if="mode == 'username'"
          v-model="form.password"
          :placeholder="$t('passwordPlaceholder')"
          password
          clearable
          :adjustPosition="false"
          :lineLeft="false"
          padding="13px 0 13px 0"
          class="password"
        />
        <tui-input
          v-else
          v-model="form.code"
          type="number"
          :placeholder="$t('codePlaceholder')"
          :maxlength="8"
          clearable
          :adjustPosition="false"
          :lineLeft="false"
          padding="13px 0 13px 0"
          class="password"
        >
          <view slot="right" class="send-code">
            <tui-countdown-verify
              :disabled="form.mobile.length != 11"
              :successVal="sendSuccess"
              :resetVal="sendFail"
              @send="sendCode"
              :text="$t('sendCode')"
            />
          </view>
        </tui-input>
        <view class="agreement">
          <tui-checkbox
            :checked="agree == '1'"
            scaleRatio="0.8"
            class="agree"
            @change="changeAgree"
          ></tui-checkbox>
          <view>
            <text @click="changeAgree">{{ $t("agree") }}</text>
            <text @click="toTerms(0)" class="a lr">{{ $t("privacy") }}</text>
            <text @click="changeAgree">{{ $t("and") }}</text>
            <text @click="toTerms(1)" class="a l"> {{ $t("service") }}</text>
          </view>
        </view>
        <tui-button
          @click="login"
          :disabled="
            mode == 'username'
              ? !form.username || !form.password
              : form.mobile.length != 11 || !form.code
          "
          >{{ $t("login") }}</tui-button
        >
        <view class="more">
          <view class="mobile" v-if="mode == 'username'">
            <text @click="changeLogin('mobile')">{{ $t("smsLogin") }}</text>
            <text class="divider">|</text>
            <text @click="toResetPass">{{ $t("forgetPass") }}</text>
          </view>
          <view @click="changeLogin('username')" class="mobile" v-else>{{
            $t("usernameLogin")
          }}</view>
        </view>
      </view>
    </view>
    <view class="bottom">
      <tui-divider backgroundColor="#fff" :size="13">{{
        $t("otherLogin")
      }}</tui-divider>
      <view class="other-login">
        <view class="other-login-wrap">
          <image src="@/static/icon/wechat.png" class="icon" />
          <image src="@/static/icon/qq.png" class="icon" />
          <image src="@/static/icon/weibo.png" class="icon" />
        </view>
      </view>
    </view>
    <tui-modal :show="verifyModal" radius="6px" padding="20px" custom fadeIn>
      <view class="verify-modal">
        <view class="verify-title">安全验证</view>
        <tui-input
          placeholder="请输入图片验证码"
          type="number"
          padding="8px 0 8px 0"
          :maxlength="8"
          :lineLeft="false"
          class="verify-input"
          v-model="form.code"
          :adjustPosition="false"
          clearable
        >
          <view slot="right" class="verify-code" @click="getCaptchaImg">
            <image
              :src="captchaImg"
              class="code-img"
              v-show="!loadingCaptcha && captchaImg"
            />
            <text v-show="!loadingCaptcha && !captchaImg" class="load-text"
              >点击加载图片</text
            >
            <tui-loadmore
              v-show="loadingCaptcha"
              text="加载中..."
              :margin="false"
              class="code-img"
            />
          </view>
        </tui-input>
        <tui-button :disabled="!form.code" height="40px" @click="sumbitLogin"
          >立即提交</tui-button
        >
        <view @click="verifyModal = false" class="cancel-title">取消</view>
      </view>
    </tui-modal>
  </view>
</template>

<script>
import {
  initCaptcha,
  drawCodeImage,
  login,
  sendLoginSms,
  smsLogin,
  userInfo,
} from "@/api/auth.js";
import { isMobile } from "@/common/js/util.js";
export default {
  data() {
    return {
      mode: "username",
      captchaImg: "",
      loadingCaptcha: false,
      form: {
        username: "",
        mobile: "",
        password: "",
        code: "",
        captchaId: "",
        saveLogin: true,
      },
      sendSuccess: 0,
      sendFail: 0,
      agree: "0",
      verifyModal: false,
      closeType: 0,
      canBack: "true",
    };
  },
  onLoad(options) {
    if (options.closeType) {
      this.closeType = options.closeType;
    }
    if (options.canBack) {
      this.canBack = options.canBack;
    }
  },
  methods: {
    init() {
      this.getCaptchaImg();
    },
    getCaptchaImg() {
      this.loadingCaptcha = true;
      initCaptcha().then((res) => {
        this.loadingCaptcha = false;
        if (res.success) {
          this.form.code = "";
          this.form.captchaId = res.result;
          this.captchaImg = drawCodeImage + this.form.captchaId;
        }
      });
    },
    sendCode() {
      if (!isMobile(this.form.mobile)) {
        this.msg("手机号格式错误");
        this.sendFail++;
        return;
      }
      sendLoginSms(this.form.mobile).then((res) => {
        if (res.success) {
          this.sendSuccess++;
          this.msg("发送短信验证码成功，请注意查收");
        } else {
          this.sendFail++;
        }
      });
    },
    changeAgree() {
      if (this.agree == "0") {
        this.agree = "1";
      } else {
        this.agree = "0";
      }
    },
    login() {
      if (this.agree != "1") {
        uni.showModal({
          title: "提示",
          content: "请先同意《隐私政策》与《用户服务协议》",
          confirmText: "同意",
          success: (res) => {
            if (res.confirm) {
              this.agree = "1";
              if (this.mode == "username") {
                this.verifyModal = true;
              } else {
                this.sumbitLogin();
              }
            }
          },
        });
      } else {
        // 已同意
        if (this.mode == "username") {
          this.verifyModal = true;
        } else {
          this.sumbitLogin();
        }
      }
    },
    sumbitLogin() {
      this.showLoading("登录中...");
      if (this.mode == "username") {
        this.verifyModal = false;
        login(this.form).then((res) => {
          if (res.success) {
            uni.setStorageSync("accessToken", res.result);
            this.afterLogin(res);
          } else {
            uni.hideLoading();
            this.getCaptchaImg();
          }
        });
      } else {
        smsLogin(this.form).then((res) => {
          if (res.success) {
            this.afterLogin(res);
          } else {
            uni.hideLoading();
          }
        });
      }
    },
    afterLogin(res) {
      uni.hideLoading();
      // 获取用户信息
      userInfo().then((res) => {
        if (res.success) {
          uni.setStorageSync("userInfo", res.result);
          this.$store.commit("setUserInfo", res.result);
          // 跳转页面
          uni.switchTab({
            url: "/pages/index/index",
            animationType: "slide-out-bottom",
          });
        } else {
          uni.hideLoading();
        }
      });
    },
    changeLogin(v) {
      this.mode = v;
    },
    close() {
      if (this.closeType == "1") {
        uni.switchTab({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateBack();
      }
    },
    openLanguage() {
      uni.navigateTo({
        url: "/pages/setting/language/language",
      });
    },
    toResetPass() {
      uni.navigateTo({
        url: "/pages/auth/resetPass/resetPass?type=reset",
      });
    },
    toTerms(v) {
      uni.navigateTo({
        url: "/pages/public/web-view/web-view?url=https://www.baidu.com",
      });
    },
  },
  mounted() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
@import "./login.scss";
</style>
